<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>订单详情</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<link rel="stylesheet" href="member.order.css" />
	<style>
		.icon-check {
			background: #008542;
			color: #FFF;
			border-radius: 50%;
			display: block;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 22px;
			position: absolute;
			top: 23px;
			left: 0;
		}
		
		.mui-row {
			position: relative;
		}
		
		.mui-row > .mui-col-xs-2 {
			position: absolute;
			width: 10%;
			top: 0px;
			bottom: 0;
		}
		
		.mui-row > .mui-col-xs-2:before {
			content: "";
			position: absolute;
			display: block;
			height: 100%;
			width: 1px;
			background: #008542;
			top: 25px;
			left: 10px;
		}
		
		.mui-row:last-child > .mui-col-xs-2:before {
			content: "";
			background: transparent;
		}
		
		.mui-row > .mui-col-xs-10 {
			position: relative;
			width: 90%;
			border: 1px solid #DCDCDC;
			border-radius: 10px;
			background: #FFF;
			margin-left: 10%;
		}
		
		.mui-row > .mui-col-xs-10:before {
			content: "";
			position: absolute;
			left: -20px;
			top: 13px;
			border: 10px solid;
			border-color: transparent #DCDCDC transparent transparent;
		}
		
		.mui-row > .mui-col-xs-10:after {
			content: "";
			position: absolute;
			left: -17px;
			top: 14px;
			border: 9px solid;
			border-color: transparent #FFF transparent transparent;
		}
		
		.mui-col-xs-10 time {
			color: #999999;
		}
		.mui-scroll-wrapper {
			top: 45px;
		}
		header {
			position: fixed !important;
		}
		header + div {
			padding-top: 50px;
		}
	</style>
</head>
<body>
	<!-- 顶部导航 开始 -->
	<header class="header mui-bar mui-bar-nav bar mui-text-center">
		<a class="mui-pull-left mui-action-back pad-h-md">
			<i class="iconfont icon-back"></i>
		</a>
		<a class="title">订单流程</a>
	</header>
	<!-- 顶部导航 结束 -->
	
		<div class="order-data"></div>
		<div class="pad-v"></div>
		<div class="mui-scroll">
			<!--这里放置真实显示的DOM内容-->
		</div>
	
	<script type="text/template" id="tpl-template">
		{{each data as item}}
		<div class="mui-row pad-h-md">
			<div class="mui-col-xs-2 pad">
				<i class="iconfont icon-check"></i>
			</div>
			<div class="mui-col-xs-10 pad mgn-v-sm">
				<label class="mui-block mui-text-left pad-h-sm">{{#item.name}}</label>
				<time class="mui-block mui-text-right">{{item.time}}</time>
			</div>
		</div>
		{{/each}}
	</script>
	
	<!-- 订单模板 开始 -->
	<script type="text/template" id="tpl-order">
		<div class="content order" data-id="{{data.id}}" data-total="{{data.order_price_total}}">
			<div class="mui-row btn-flow">
				<label class="mui-col-xs-6 pad-v pad-h-md">订单</label>
			</div>
			{{each data.extend as product}}
			<div class="mui-row product" data-id="{{product.goods_id}}">
				<div class="mui-col-xs-3 order-img">
					<img src="{{product.thumb | thumb}}" />
				</div>
				<div class="mui-col-xs-9 pad-v pad-h">
					<p class="product-name">{{product.title}}</p>
					<p class="product-sku">
						{{each product.attr as attr}}{{attr.name}} {{/each}}
					</p>
					<p class="product-price">
						￥{{price(product.pay_total)}}
						<span class="mui-pull-right">
							x {{product.nums}}
						</span>
					</p>
				</div>
			</div>
			{{/each}}
			<div>
				<div class="mui-row pad-h-md pad-v-sm">
					<span class="mui-col-xs-12 order-text">
						<label>订单编号</label>
						<label>{{data.number}}</label>
					</span>
					<span class="mui-col-xs-12 order-text">
						<label>收货地址</label>
						<label>
							{{if data.address_info}}
							{{data.address_info.recipient + ' ' +data.address_info.mobile}}
							{{/if}}
						</label>
					</span>
					{{if data.address_info}}
					<span class="mui-col-xs-12 order-text">
						<label>　　　　</label>
						<label>
							{{data.address_info.province_name + ' ' + data.address_info.city_name　+　' ' + data.address_info.county_name + ' ' + data.address_info.address}}
						</label>
					</span>
					{{/if}}
					<span class="mui-col-xs-12 order-text">
						<label>下单时间</label>
						<label>{{data.create_time}}</label>
					</span>
					<span class="mui-col-xs-12 order-text">
						<label>商品总额</label>
						<label>￥{{price(data.order_price_total)}} <small>(含运费￥{{price(data.freight)}})</small></label>
					</span>
					<span class="mui-col-xs-12 order-text">
						<label>付款总额</label>
						<label>￥{{price(data.pay_total)}}</label>
					</span>
				</div>
			</div>
		</div>
	</script>
	<!-- 订单模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="member.order.flow.js" ></script>
</body>
</html>